<template>
  <!-- 布局大小 -->
  <el-tooltip
    :content="$t('layout.resize.tooltip')"
    effect="dark"
    placement="bottom"
  >
    <el-dropdown trigger="click" @command="handleSizeChange">
      <div>
        <svg-icon icon-class="size" />
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="item of sizeOptions"
            :key="item.value"
            :disabled="appStore.size === item.value"
            :command="item.value"
          >
            {{ item.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-tooltip>
</template>

<script setup>
import { smartTranslate as $t } from '@/lang';
import { useI18n } from 'vue-i18n';
import { useAppStore } from '@/store/modules/app';

const { t } = useI18n();

const sizeOptions = computed(() => {
  return [
    { label: $t('layout.resize.default'), value: 'default' },
    { label: $t('layout.resize.large'), value: 'large' },
    { label: $t('layout.resize.small'), value: 'small' },
  ];
});

const appStore = useAppStore();

function handleSizeChange(size) {
  appStore.changeSize(size);
  ElMessage.success($t('layout.resize.success'));
}
</script>

<style scoped>
/* 如果有特定的样式需求，可以在这里添加 */
</style>
